@charset "utf-8";

 @font-face {font-family: "iconfont";
   src: url('../fonts/iconfont.eot?t=1528121861743'); /* IE9*/
   src: url('../fonts/iconfont.eot?t=1528121861743#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('../fonts/iconfont.woff?t=1528121861743') format('woff'),
   url('../fonts/iconfont.ttf?t=1528121861743') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   url('../fonts/iconfont.svg?t=1528121861743#iconfont') format('svg'); /* iOS 4.1- */
 }

 @font-face {font-family: "shareicon";
   src: url('../fonts/share_icon.eot?t=1521380604942'); /* IE9*/
   src: url('../fonts/share_icon.eot?t=1521380604942#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('../fonts/share_icon.woff?t=1521380604942') format('woff'),
   url('../fonts/share_icon.ttf?t=1521380604942') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   url('../fonts/share_icon.svg?t=1521380604942#iconfont') format('svg'); /* iOS 4.1- */
 }

body {
	font-size: 14px;
	line-height: 24px;
	font-family: '微软雅黑', 'Microsoft YaHei', Tahoma;
	height: 100%;
	background-image: url(about:blank);
	background-attachment: fixed;
}

a,a:link,a:visited {
	color: #333;
}

a:hover,a:focus,a:active,a.current {
	color: #00AAD5
}

.fr, .more {
	float: right
}


/*text*/
.f12{ font-size:12px}
.f13{ font-size:13px}
.f14{ font-size:14px}
.f16{ font-size:16px}
.f18{ font-size:18px}
.f20{ font-size:20px}

.fb{ font-weight:bold}
.fn{ font-weight:normal}
.t2{ text-indent:2em}
.lh150{ line-height:150%}
.lh180{ line-height:180%}
.lh200{ line-height:200%}
.unl{ text-decoration:underline}
.no_unl{ text-decoration:none}

/*position*/
.tl{ text-align:left}
.tc{ text-align:center}
.tr{ text-align:right}
.bc{ margin-left:auto; margin-right:auto}
.fl{ float:left; display:inline}
.fr{ float:right; display:inline}
.cb{ clear:both}
.cl{ clear:left}
.cr{ clear:right}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
.db{ display:block}

/*width*/
.w{ width:100%}
.w500{ width:500px;}
.h{ height:100%}

/*edge*/
.m10{ margin:10px}
.m15{ margin:15px}
.m30{ margin:30px}

.mt5{ margin-top:5px}
.mt10{ margin-top:10px}
.mt15{ margin-top:15px}
.mt20{ margin-top:20px}
.mt30{ margin-top:30px}
.mt50{ margin-top:50px}

.mb5{ margin-bottom:5px}
.mb10{ margin-bottom:10px}
.mb15{ margin-bottom:15px}
.mb20{ margin-bottom:20px}

.ml5{ margin-left:5px}
.ml10{ margin-left:10px}
.ml15{ margin-left:15px}
.ml20{ margin-left:20px}

.mr5{ margin-right:5px}
.mr10{ margin-right:10px}
.mr15{ margin-right:15px}
.mr20{ margin-right:20px}

.mr8{ margin-right:8px}

.p10{ padding:10px}
.p15{ padding:15px}
.p30{ padding:30px}

.p5{ padding-top:5px}
.pt10{ padding-top:10px}
.pt15{ padding-top:15px}
.pt20{ padding-top:20px}
.pt30{ padding-top:30px}
.pt50{ padding-top:50px}

.pb5{ padding-bottom:5px}
.pb10{ padding-bottom:10px}
.pb15{ padding-bottom:15px}
.pb20{ padding-bottom:20px}

.pl5{ padding-left:5px}
.pl10{ padding-left:10px}
.pl15{ padding-left:15px}
.pl20{ padding-left:20px}

.pr5{ padding-right:5px}
.pr10{ padding-right:10px}
.pr15{ padding-right:15px}
.pr20{ padding-right:20px}

.header {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
    min-width: 152px;
	height: auto;
	padding-right: 20px;
	background: rgba(255,255,255,0.9);
}

.home-page .header {
	height: 100%;
}

.header .inner {
    position: relative;
    top: 40px;
	margin: 0 0 40px 20px;
}

.logo {
    position: absolute;
    top: 0;
    left: 0;
	float: left;
    width: 17px;
	height: 160px;
	margin-right: 6px;
    font-size: 16px;
    line-height: 1.4
}

:lang(en) .logo {
	margin: 114px 0 0 -108px;
	width: 240px;
	height: 19px;
    font-size: 18px;
    -webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

#main {
	margin: 40px 0 0 380px;
    padding-bottom: 40px
}

#main.works-main {
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 50px 80px
}

.work-wrapper {
	margin: 40px 0 0 0
}

.about-wrapper,
.text-wrapper,
.news-wrapper,
.links-list-wrapper {
	width: 1000px;
}


#nav {
	width: auto;
	float: left;
	margin-left: 140px;
	display: none;
}


#nav .list {
	float: left;
	width: 180px;
	margin-right: 20px;
}

#nav li {
	line-height: 24px;
}

#nav .nav-list {
    position: relative;
}

#nav .nav-list > li {
    position: absolute;
    width: 180px;
    margin: 0 20px 20px 0;
}

#nav .nav-list > li > a {
    font-weight: bold
}

.video-wrapper {
	max-width: 1000px;
}

.list {
	margin: 0 0 20px 0
}

.video-wrap .list li {
	position: relative;
	float: left;
	width: 170px;
	margin: 0 20px 20px 0;
}

.video-wrap .list p {
	display: table-cell;
	width: 170px;
	height: 140px;
	vertical-align: middle
}

.video-wrap .list p {
	*display: block;
	*font-size: 116px
}

.video-wrap .list img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle
}

.video-wrap .list h2 {
	margin: 11px 0 0
}

.video-window {
	width: 480px;
	height: 360px;
	border: 1px solid #CCC
}

.footer {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 100
}


.mes {
	width: 100%
}

.comments-form {
	float: left;
	width: 300px;
	margin-top: 10px
}

.comments-form .s1, .comments-form textarea {
	display: block;
	width: 300px;
	height: 27px;
	margin: 0 0 10px;
	padding: 2px 3px;
	border: solid #cccccc;
	border-width: 0 0 1px 0;
	line-height: 27px
}

.comments-form textarea {
	display: block;
	width: 300px;
	height: 120px;
	margin-top: 40px;
	padding: 1px 3px;
	border: 1px solid #cccccc
}

.comments-form .submin-btn {
	width: 51px;
	height: 27px;
	background: #fff;
	border: 1px solid #d6d6d6;
	color: #444444;
	line-height: 25px;
	font-size: 14px
}

.comments-info {
	float: left;
	width: 400px;
	margin-top: 13px;
	margin-left: 100px
}

.comments-info div {
	margin: 4px 0 0
}

.comments-info dl {
	border-top: 1px solid #cccccc
}

.comments-info dt {
	line-height: 30px;
	margin: 15px 0 16px;
	color: #444
}

.comments-info dt .fr {
	color: #ccc
}

.comments-info dd {
	padding: 0 0 25px;
	line-height: 180%;
	color: #888
}

.text-list-wrapper {
	width: 1000px;
	margin-right: 30px;
}

.text-list-wrapper li {
	margin-bottom: 10px
}

.text-details {
	width: 1000px
}

.text-details-wrapper {
  width: 1000px;
  margin-right: 40px;
}

.text-details .title {
	margin-bottom: 20px
}
.text-details .more {
	font-size: 12px
}

.text-details .content {
	line-height: 1.5
}

.links li {
	margin: 0 20px 40px 0;
	width: 180px;
	float: left;
	border-bottom: 1px solid #e5e5e5
}

.menu-img {
	position: absolute;
	top: 6px;
	left: 70px;
	z-index: 999999;
	width: 26px;
	height: 26px;
	display: block;
}

.menu-img .icon-block-line {
	height: 4px;
}

.list-img {
	position: fixed;
	top: 40px;
	left: 50%;
	width: 62px;
	margin-left: -31px
}

.square a,.entry a {
	width: 26px;
	height: 26px;
	display: block;
	cursor: pointer
}

.icon-block {
	float: left;
	width: 8px;
	height: 8px;
	background: #000;
	margin: 1px 0 0 1px;
	opacity: .1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
}

.icon-block-thick,.icon-block-thin {
	width: 26px;
	height: 18px;
	margin-bottom: 2px;
	background: #000;
	display: block;
	opacity: .1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
}

.icon-block-thin {
	height: 6px
}

.top-row {
	margin-top: 0;
}

.left-col {
	margin-left: 0;
}

.icon-block-line {
	width: 26px;
	height: 1px;
	margin-bottom: 5px;
	background: #000;
	display: block;
	opacity: 0.2;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
}

.oc {
	opacity: 0.4;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
}

.w9 {
	width: 80%
}

.w5 {
	width: 50%
}

.oc {
	opacity: 0.4;
}

.works-list-wrapper {
	max-width: 1600px;
	margin: 100px auto 20px
}

.works-list-wrapper { overflow: hidden; }
.works-list-wrapper .works-list { overflow: hidden; margin: -26px 0 0 -26px }
.works-list-wrapper .works-list .box { display: none; float: left; opacity: 0; filter: alpha(opacity=0) }
.works-list-wrapper .works-list .inner { margin: 26px 0 0 26px }
.works-list-wrapper .works-list .image { position: relative; margin: 0 0 12px }
.works-list-wrapper .works-list .image img { position: relative; visibility: hidden }
.works-list-wrapper .works-list .info { min-height: 84px; line-height: 1.5 }



#supersized-loader {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: 43px;
	height: 29px;
	margin: -29px 0 0 -21px;
	text-indent: -9999px
}

#supersized {
	position: fixed;
	top: 0;
	right: 0;
	z-index: -999;
	display: block;
	height: 100%;
	width: 100%;
	overflow: hidden
}

#supersized img {
	position: relative;
	display: none
}

#supersized li {
	position: absolute;
	top: 0;
	right: 0;
	z-index: -30;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #d9d9d9
}

#supersized a {
	width: 100%;
	height: 100%;
	display: block
}

#supersized li.prevslide {
	z-index: -20
}

#supersized li.activeslide {
	z-index: -10
}

#supersized li.image-loading {
	width: 100%;
	height: 100%;
	background-color: #d9d9d9
}

#supersized li.image-loading img {
	visibility: hidden
}

#supersized li.prevslide img, #supersized li.activeslide img {
	display: inline
}

.work-text {
	width: 800px;
	margin: 100px auto 20px
}

.hide-box {
    display: none
}

.sign-in { margin-left: 15px }


#supersized-loader { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; text-indent: -999em }

#supersized { position: fixed; left: 0; top: 0; z-index: 2; display: block; height: 100%; width: 100%; overflow: hidden; }
#supersized.cursor-left {
    position: absolute;
    z-index: 1
}
#supersized.cursor-left { cursor: url('../images/cursor-l.cur'), auto }
#supersized.cursor-right { cursor: url('../images/cursor-r.cur'), auto }


.ie9 #supersized.cursor-left { cursor: pointer;position: absolute;z-index: 1; }
.ie9 #supersized.cursor-right {  cursor: pointer;position: absolute;z-index: 1; }

/* #supersized img { position: relative; display: none; max-width: 1000px; max-height: 700px; background: #fff } */

#supersized li { position: fixed; z-index: -30; top: 0; left: 0; display: block; width: 100%; height: 100%; overflow: hidden; background: #fff; text-align:center }
#supersized a { width: 100%; height: 100%; display: block }
#supersized li.prevslide { z-index: -20 }
#supersized li.activeslide { z-index: 1 }

#supersized li.image-loading { width: 100%; height: 100%; background-color: #ffffff }
#supersized li.image-loading img { visibility: hidden }
#supersized li.prevslide img, #supersized li.activeslide img { display: inline; }

#controls-wrapper { position: fixed; bottom: 0; left: 0; z-index: 4; width: 100%; background: #fff }
#controls { position: relative; z-index: 5; overflow: hidden; height: 100%;}
#slidecaption { position:fixed; right:30px; top:40px; width:250px;color:#000;margin: 0 0 0 20px;overflow: hidden;background: rgba(255,255,255,.9);padding: 3px;}

#slidecaption .title {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.4
}

#slidecaption .info {
  margin: 0 0 2px;
  line-height: 1.4;
}

#thumb-scroller { position: relative; overflow: hidden; margin:70px auto 50px; height:140px; }
#thumb-tray { position: fixed; z-index: 2; bottom: 0; left: 0; width: 100%; height: 300px; overflow: hidden; text-align: center; opacity: 0; background:rgba(255,255,255,0.8) }
#tray-button { display: none }

ul#thumb-list { position: relative; left: 0 }
ul#thumb-list li { float: left; height: 140px; padding:0 30px; overflow: hidden }
ul#thumb-list img { cursor: pointer; width:100px;display: inline;}
ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img { background:rgba(0,0,0,0.8)}

#controls #prevslide,#controls #nextslide{ display:none}

.pages { margin-top: 30px }
.pages a,
.pages span { display: inline-block; margin: 0 15px 0 0 }

#supersized-loader, #supersized li.image-loading {
	background: #ffffff url('../images/loading_img.gif') no-repeat center center
}

@media screen and ( -webkit-min-device-pixel-ratio: 2 ) {
    #supersized-loader, #supersized li.image-loading {
    	background-image: url('../images/loading_img@2x.gif')
    }
}


.text-wrapper .fl h2, .text-wrapper .fr .title, .news-wrapper .title { height: 34px; border-bottom: 1px dotted #dadada }

.news-wrapper {  }
.news-wrapper .list li { height: 25px; margin: 12px 0 0; border-bottom: 1px dotted #999; line-height: 25px }
.news-wrapper .list li span { float: right }
.news-wrapper .info { line-height: 1.5 }

.text-wrapper .text, .news-wrapper .text { margin: 18px 0 0; line-height: 1.5 }

.video-box iframe,
.video-box { width: 640px!important; height: 360px!important; margin: 0 auto 25px }

.video-box { margin-top: 30px }

.links-list-wrapper {
    overflow: hidden;
}
.links-list-wrapper .list { margin: -16px 0 0 -80px }
.links-list-wrapper .box { float: left; min-width: 122px; margin: 16px 0 0 80px }

body .bdshare-button-style0-24 a { width: auto; height: auto; margin: 0 0 0 10px; padding-left: 0; background: none; font-family:"shareicon" !important; font-size: 18px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
body .bdshare-button-style0-24 a:first-child { margin-left: 0 }
body .bdshare-button-style0-24 a.bds_weixin:after { content: '\e6b2' }
body .bdshare-button-style0-24 a.bds_fbook:after { content: '\e689' }
body .bdshare-button-style0-24 a.bds_twi:after { content: '\e6aa' }
.bdsharebuttonbox { margin-top: 25px }
.share-pop .bdsharebuttonbox { margin-top: 0 }


.works-details-page .share-pop {
  position: absolute;
  right: 30px;
  bottom: 20px;
  z-index: 10000
}